@import "../layout/variables", "../layout/mixin";
/*店铺banner样式*/
@mixin box-shadow($shadow...) {
  -webkit-box-shadow:$shadow;
  box-shadow:$shadow;
}
.banner-shop{
        position: relative;
        width: 1100px;
        height: 422px;
        $margin: 0 auto !global;
        margin:$margin;
  .bd{
    position:relative;
    margin:$margin;
    z-index:0;
    overflow:hidden;
     ul{
        li{
          overflow:hidden;
          text-align:center;
          a{
            display:block;
            height:422px;
          }
        }
     }
  }
  .hd{
    position:absolute;
    z-index:1;
    height:30px;
    line-height:30px;
    bottom:0;
    left:47%;
    ul{
      text-align:center;
      li{
        cursor:pointer;
        display:inline-block;
        *display:inline;
        zoom:1;
        width: 10px;
        height: 10px;
        background-color: #e4e4e4;
        float: left;
        border-radius: 50%;
        cursor: pointer;
        margin: 0 8px;
        overflow:hidden;
      }
      .on{
        background: #c9c9c9;
        height:10px;
        width:10px;
    }

    }

  }



  .prev{
    position:absolute;
    z-index:1;
    top:50%;
    margin-top:-30px;
    left: 30px;
    z-index:1;
    width:25px;
    height:25px;
    cursor:pointer;
    display:none;
    border-width: 0 0 5px 5px;
    border-style: solid;
    transform:rotateZ(45deg);
    color: #bcbcbc;


  }
  .next{
    @extend .prev;
    transform:rotate(-135deg);
    left:auto;
    right:30px;
     }




}
.sells{
  margin-top: 50px;
  $margin: 0 auto;
  h2{
      font-family: 'Microsoft Yahei';
      font-size: 18px;
      display:block;
      width:8%;
      text-align: center;
      color: #333333;
      margin:$margin;
      b {
        display:block;
        width:28%;
        padding-top: 10px;
        margin:$margin;
        border-bottom:{
          color: #333333;
          width: 2px;
          style: solid;
        }
        background-color: rgb(255, 255, 255);
      }
  }
  ul{
    margin-top: 28px;
    li{
      width: 250px;
      height: 200px;
      display: block;
      float: left;
      margin: 0px 0 100px 20px ;
      a{
        display:inline-block;border:2px solid #fff;
        &:hover{
          //@include box-shadow(2px solid #EAEAEA);
          @include box-shadow(0 2px 16px rgba(234,234,234,.9));
        }
      }
    }
  }

}
.x-banner{
     a:nth-of-type(odd){
            margin-right: 102px;
     }
}

